<template>
  <div class="dashboard-container">
    <div><h1>Smart Shift Book Machining</h1></div>
    <hr/>
    <div class="container">
      <div class="tableBar">
<!--        <label style="margin-right: 10px">产线名称：</label>-->
<!--        <el-input v-model="line" placeholder="请填写产线名称" style="width: 14%" clearable @clear="pageQuery"/>-->
        <label style="margin-right: 10px; margin-left: 20px">产线所属GROUP：</label>
        <el-select v-model="group" placeholder="请选择" clearable @clear="queryNoPaging()">
          <el-option
            v-for="item in groups"
            :key="item.group_t"
            :label="item.group_t"
            :value="item.group_t">
          </el-option>
        </el-select>
<!--        <label style="margin-right: 10px; margin-left: 20px">产线状态：</label>-->
<!--        <el-select v-model="lineStatus" placeholder="请选择" clearable @clear="pageQuery()">-->
<!--          <el-option v-for="item in statusArr"-->
<!--                     :key="item.value"-->
<!--                     :label="item.label"-->
<!--                     :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
        <el-button type="primary" style="margin-left: 25px" @click="queryNoPaging()"> 查询 </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="recordsNoPaging"
        border
        style="width: 100%; font-size: large; margin-top: 50px"
        >
        <el-table-column prop="line"
                         label="产线名称" />
        <el-table-column prop="group_t"
                         label="产线Group" />
        <el-table-column prop="lineStatus"
                         label="产线状态" >
          <template #default="{ row }">
            <el-tag
              :type="row.line_Status1 === '进行中' ? 'success' : 'danger'"
              effect="light"
            >
              {{ row.line_Status1 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="250"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleAddBook(scope.row)" style="color: white">录入</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <el-pagination-->
<!--        class="pageList"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="page"-->
<!--        :page-sizes="[5, 10, 15]"-->
<!--        :page-size="pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="total">-->
<!--      </el-pagination>-->
    </div>
  </div>
</template>

<script lang="ts">

import { getLineList, queryNoPaging } from '@/api/line'
import { UserModule } from '@/store/modules/user'
import { getLineDepartment, getLineGroup } from '@/api/department'

export default {
  //模型数据
  data() {
    return {
      loading: true,
      line: '', //产线名称，对应上面的输入框
      department: '',//产线所属部门
      departments: [],//为产线所属部门下拉框提供的数据
      lineStatus: '',//产线状态
      statusArr: [{ //为产线状态下拉框提供的数据
        value: '进行中',
        label: '进行中'
      },{
        value: '未开始',
        label: '未开始'
      }],
      page: 1, //页码
      pageSize: 10, //每页记录数
      total: 0, //总记录数
      records: [], //当前页要展示的数据集合
      recordsNoPaging: [],
      group: '',
      groups: []
    }
  },
  created() {
    this.loading=false
    this.pageQuery()
    getLineDepartment( { empno:UserModule.username} ).then((res) => {
      this.departments = res.data.data
    })
    this.queryNoPaging()
    getLineGroup( { empno:UserModule.username} ).then((res) => {
      this.groups = res.data.data
    })
  },

  methods: {
    //分页查询
    pageQuery() {
      //准备请求参数
      const params = {empno:UserModule.username,line:this.line,lineStatus:this.lineStatus,department:this.department,page:this.page,pageSize:this.pageSize}
      //发送Ajax请求，访问后端服务，获取分页数据
      getLineList(params).then(res => {
        if(res.data.code == 1){
          this.total = res.data.data.total
          this.records = res.data.data.records
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err.message)
      })
    },
    //插线查询，无需分页
    queryNoPaging() {
      //准备请求参数
      const params = {empno:UserModule.username,groupt: this.group}
      queryNoPaging(params).then(res => {
        if(res.data.code == 1){
          this.recordsNoPaging = res.data.data
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err.message)
      })
    },
    //添加班次，跳转至添加班次界面（组件）
    handleAddBook(row) {
      this.$router.push({
        path: '/shiftbook/add',
        query: {department: row.department,line: row.line}
      })
    },
    //pageSize发送变化时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    //page发生变化时
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    }
  }
}

</script>

<style scoped lang="scss">
.disabled-text {
  color: #bac0cd !important;
}
.el-table .running-row {
  background-color: greenyellow !important;
}
.el-table .stopping-row {
  background-color: orangered !important;
}

</style>
